<template>
	<view>
		<view class="fund-contain">
			<view class="fund-contain-amount">
				<view class="">
					{{allCount}}
				</view>
				<view class="">
					客户资源越多，价值越大
				</view>
			</view>
			<view class="fund-contain-title">
				客户人数(人)
			</view>
		</view>
		<view class="deposit-fund first-style">
			<view class="deposit-fund-content">
				<view class="deposit-fund-content-details">
					<view class="">{{directCustomer.count}}</view>
					<view class="">直接客户人数</view>
				</view>
				<view class="deposit-fund-line"></view>
				<view class="deposit-fund-content-details">
					<view class="">{{indirectCustomer.count}}</view>
					<view class="">间接客户人数</view>
				</view>
			</view>
		</view>
		<view class="" v-if="indirectLength!=0 || directLength!=0">
			<view class="group-state-title">
				<view class="">
					<view class="group-state-contain">
						<view :class="groupStatusIndex==index?'group-state-active':''" v-for="(item,index) in groupStatus" :key='index' @click="stateClick(index)">
							{{item}}
						</view>
					</view>
				</view> 
			</view>
			<view class="client-contain" v-if="groupStatusIndex == 0 && directLength!=0">
				<view class="client-content" v-for="(item,index) in directCustomer.user" :key='index'>
					<view class="client-content-msg">
						<image :src="item.avatar" mode=""></image>
						<view class="client-content-text">
							<view class="">{{item.nickname}}</view>
							<view class="">{{item.date_added}}</view>
						</view>
					</view>
					<view class="client-content-num">
						邀请<text>{{item.son_count}}</text>人
					</view>
				</view>
			</view>
			<view class="no-customer" v-else-if="groupStatusIndex == 0 && directLength==0">
				暂无客户资源！请邀请他人参与活动
			</view>
			<view class="client-contain" v-if="indirectLength!=0 && groupStatusIndex == 1">
				<view class="client-content" v-for="(item,index) in indirectCustomer.user" :key='index'>
					<view class="client-content-msg">
						<image :src="item.avatar" mode=""></image>
						<text>{{item.nickname}}</text>
					</view>
					<view class="client-content-num">
						{{item.date_added}}
					</view>
				</view>
			</view>
			<view class="no-customer" v-else-if="indirectLength==0 && groupStatusIndex == 1">
				暂无客户资源！请邀请他人参与活动
			</view>
		</view>
		<view class="no-customer" v-else>
			暂无客户资源！请邀请他人参与活动
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				groupStatus:['直接抵达客户数','间接抵达客户数'],
				groupStatusIndex:0,
				store_id:'',
				directCustomer:{},
				indirectCustomer:{},
				allCount:0,
				directLength:0,
				indirectLength:0
			}
		},
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			this.gainData()
		},
		methods:{
			stateClick(index){
				this.groupStatusIndex = index
			},
			gainData(){
				let data = {
					token:this.$store.getters.getToken
				}
				this.$api.gain_customer_msg(data).then(res => {
					console.log(res)
					if(res.status){
						this.directCustomer = res.zhijie
						this.indirectCustomer = res.jianjie
						this.allCount = res.allCount
						this.directLength = this.directCustomer.user.length
						this.indirectLength = this.indirectCustomer.user.length
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.no-customer{
		color: #999999;
		font-size: 28upx;
		text-align: center;
		margin-top: 60upx;
	}
	page{
		background: #F3F3F4;
	}
	.fund-contain{
		width: 100%;
		height: 320upx;
		background: url(https://tool.tuanhaoke.cn/static/image/member/fund.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 46upx;
		box-sizing: border-box;
	}
	.fund-contain-amount{
		position: relative;
	}
	.fund-contain-amount>view:first-child{
		text-align: center;
		color: #FFFFFF;
		font-size: 60upx;
		margin-top: 14upx;
	}
	.fund-contain-amount>view:last-child{
		width: 294upx;
		height: 28upx;
		line-height: 28upx;
		text-align: center;
		color: #FF8B46;
		font-size: 20upx;
		border-radius: 18upx 18upx 18upx 0;
		background: #FFFFFF;
		position: absolute;
		top: -26upx;
		right: 66upx;
	}
	.fund-contain-title{
		text-align: center;
		color: #FFFFFF;
		font-size: 20upx;
		margin-top: 10upx;
	}
	.deposit-fund{
		width: 100%;
		height: 154upx;
		background: #FFFFFF;
		padding: 30upx 30upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
	}
	.first-style{
		border-radius: 24upx 24upx 0 0;
		margin-top: -60upx;
	}
	.deposit-fund-content{
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
	}
	.deposit-fund-content-details{
		flex-grow: 1;
	}
	.deposit-fund-content-details>view:first-child{
		color: #333333;
		font-size: 36upx;
		text-align: center;
		flex-grow: 1;
	}
	.deposit-fund-content-details>view:first-child>text{
		font-size: 28upx;
	}
	.deposit-fund-content-details>view:last-child{
		color: #999999;
		font-size: 24upx;
		margin-top: 4upx;
		text-align: center;
		flex-grow: 1;
	}
	.deposit-fund-line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #EFEFEF;
		margin-top: 18upx;
	}
	.group-state-title{
		width: 100%;
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.group-state-title>view{
		padding: 18upx 0;
		box-sizing: border-box;
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
	}
	.group-state-contain{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		display: flex;
		background: #F2F2F2;
		border-radius: 32upx;
	}
	.group-state-contain>view{
		width: 50%;
		text-align: center;
		color: #666666;
		font-size: 28upx;
		border-radius: 32upx;
	}
	.group-state-contain .group-state-active{
		background: linear-gradient(to right,#FE9543,#FF664F);
		color: #FFFFFF;
	}
	.client-contain{
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.client-content{
		width: 100%;
		padding: 22upx 0;
		box-sizing: border-box;
		justify-content: space-between;
		display: flex;
	}
	.client-content-msg{
		display: flex;
	}
	.client-content-msg>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.client-content-num{
		color: #666666;
		font-size: 28upx;
		line-height: 80upx;
	}
	.client-content-num>text{
		color: #FF391F;
	}
	.client-content-text{
		margin-left: 20upx;
	}
	.client-content-text>view:first-child{
		color: #333333;
		font-size: 28upx;
	}
	.client-content-text>view:last-child{
		color: #666666;
		font-size: 24upx;
		margin-top: 6upx;
	}
	.client-content-msg>text{
		display: inline-block;
		margin-left: 20upx;
		color: #333333;
		font-size: 28upx;
		line-height: 80upx;
	}
</style>
